<!--用户：主页面容器-->
<template>
    <v-header/>
    <v-sidebar/>
    <div class="content-box" :class="{ 'content-collapse': sidebar.collapse }">
		<v-tags></v-tags>
		<div class="content">
			<router-view v-slot="{ Component }">
				<transition name="move" mode="out-in">
					<keep-alive :include="tags.nameList">
						<component :is="Component"></component>
					</keep-alive>
				</transition>
			</router-view>
		</div>
	</div>
</template>

<script setup>
import vHeader from '../../components/header_user.vue'
import vSidebar from '../../components/side/siderbar_user.vue'
import vTags from '../../components/tag_user.vue'
import { useSidebarStore } from '../../store/sidebar';
import { useTagsStore } from '../../store/tags';
import { useRouter } from 'vue-router';
import { useGlobleStore } from '../../store/globle';

const sidebar = useSidebarStore()
const tags = useTagsStore()
const router = useRouter()
const globle = useGlobleStore()

if(!globle.getLoginState()) {
    router.push('/UserPerson')
    globle.setLoginState(true)
}
</script>

<style scoped>
.header{
    background-color: #242f42;
}
.login-wrap{
    background: #324157;
}
.plugins-tips{
    background: #eef1f6;
}
.plugins-tips a{
    color: #20a0ff;
}
.tags-li.active {
    border: 1px solid #409EFF;
    background-color: #409EFF;
}
.message-title{
    color: #20a0ff;
}
.collapse-btn:hover{
    background: rgb(40,52,70);
}

.content-box {
    position: absolute;
    left: 225px;
    right: 0;
    top: 75px;
    bottom: 0;
    padding-bottom: 30px;
    -webkit-transition: left .3s ease-in-out;
    transition: left .3s ease-in-out;
    background: #f6f6fc;
}

.content {
    width: auto;
    height: 100%;
    padding: 10px;
    overflow-y: scroll;
    box-sizing: border-box;
}

.content-collapse {
    left: 75px;
}

.MyContainer {
    width: auto;
    padding: 15px 20px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
}
</style>